<template>
  <div class="add-on-item">
    <div class="full-subtract-box" v-if="full_subtract_box">
      <span>此商品参与<span>{{resData.title}}</span>活动，赶紧凑单吧~</span>
      <span class="gotoLink" @click="isShowClick">【去凑单>】</span>
      <!-- <input type="hidden" class="full_subtract_value" value=""> -->
    </div>
    <!-- 凑单弹窗 -->
    <popup
      :isShow.sync="show"
      title="凑单商品"
      @confirm="confirm"
      @cancel="cancel"
    >
      <template slot="content">
        <!--提现明细-->
        <div class="goods-con">
          <van-list
            v-if="items.length >= 0"
            v-model="loading"
            :immediate-check="true"
            :finished="finished"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            finished-text=""
            @load="goodsListLoadData"
          >
            <ul>
              <li
                class="g-box por"
                v-for="(items, index) in items"
                :key="index"
                :data-supplier="items.supplier"
              >
                <section class="img-info">
                  <img
                    v-if="items.is_compress"
                    :src="items.pic_url + '160x160'"
                    width="80"
                    height="80"
                  />
                  <img v-else :src="items.pic_url" width="80" height="80" />
                </section>
                <section class="g-flex">
                  <div class="goods-title">{{ items.title }}</div>
                  <div class="goods-flex">
                    <p
                      class="goods-info"
                      v-html="scaleGoodsPriceFn(items.price)"
                    ></p>
                    <div class="number-control">
                      <div
                        class="btn btn-choose"
                        v-if="
                          items.item_config &&
                          (items.item_config.shopping_need_date == 1 ||
                            items.item_config.shopping_need_memo == 1 ||
                            items.have_sku == 1)
                        "
                      >
                        <span
                          @click="
                            JumpName('item-detail', { detailId: items.item_id })
                          "
                          >选规格</span
                        >
                      </div>

                      <div
                        class=""
                        v-else-if="
                          items.item_config &&
                          items.item_config.shopping_need_date == 2
                        "
                      >
                        <div
                          class="btn btn-choose"
                          v-if="items.system_shopping_need_date == 1"
                        >
                          <span
                            @click="
                              JumpName('item-detail', {
                                detailId: items.item_id,
                              })
                            "
                            >选规格</span
                          >
                        </div>

                        <div class="ctrl" v-else>
                          <count-plug
                            :disabled="disabled"
                            :minLimit="0"
                            :itemId="items.item_id"
                            :skuId="String(items.sku_id)"
                            :supplier="items.supplier"
                            v-model="items.chooseNum"
                          ></count-plug>
                        </div>
                      </div>

                      <div class="ctrl" v-else>
                        <count-plug
                          :disabled="disabled"
                          :minLimit="0"
                          :itemId="items.item_id"
                          :skuId="String(items.sku_id)"
                          :supplier="items.supplier"
                          v-model="items.chooseNum"
                        ></count-plug>
                      </div>
                    </div>
                  </div>
                </section>
              </li>
            </ul>
          </van-list>
          <div v-else>
            <no-data :noData="noData"></no-data>
          </div>
        </div>
      </template>
    </popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { scaleGoodsPrice } from '@/utils/index.js'
import { getNowFullSubtract, getItemList, addCartItem } from '@/api/item/item'
import popup from '@/components/popup'
import CountPlug from '@/components/CountPlug'
import noData from '@/components/noData/index'
import { Popup } from 'vant'

Vue.use(Popup)
export default Vue.extend({
  components: {
    popup,
    noData,
    CountPlug,
  },
  props: {
    subtractPrice: {
      default: 0,
    },
    checkedList: {
      default: [],
    },
  },
  data() {
    return {
      full_subtract_box: false,
      noData: {
        width: '184px',
        marginTop: '100px',
        txtMarginTop: '-30px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
        text: '对不起，暂无商品数据',
      },
      error: false,
      loading: false,
      finished: false,
      p: 2,
      show: false,
      resData: {},
      items: [],
      disabled: true,
      // subtract_price: 50,
      locked: true,
      dataArr: [],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 获取满减信息
    init() {
      getNowFullSubtract().then((res) => {
        if (res.status == 1) {
          this.resData = res.data
          const order_money = res.data.order_money || 0
          const item_ids = res.data.item_ids
          const subtractPrice = this.subtractPrice
          const checkedList = this.checkedList
          let sum = 0
          const arrPrice = []
          if (item_ids && item_ids.length > 0) {
            // 有满减商品
            item_ids.forEach((item) => {
              checkedList.forEach((check) => {
                if (item == check.item_id) {
                  arrPrice.push(
                    parseFloat(check.price) * parseFloat(check.num)
                  )
                }
              })
            })
            arrPrice.forEach((val, index, arr) => {
              sum += val
            })
            if (sum >= order_money || sum == 0) {
              this.full_subtract_box = false
            } else {
              this.full_subtract_box = true
              this.full_subtract_value = Number(order_money) - Number(sum)
            }
          } else if (
            subtractPrice - order_money >= 0 ||
              Number(subtractPrice) == 0
          ) {
            this.full_subtract_box = false
          } else {
            this.full_subtract_box = true
            this.full_subtract_value =
                Number(order_money) - Number(subtractPrice)
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 加入购物车
    confirm(callback) {
      callback(false)
      const items = this.items
      const tempdata = {}
      const dataArr = []
      items.forEach((item) => {
        if (item.chooseNum > 0) {
          tempdata.id = item.item_id
          tempdata.num = item.chooseNum
          tempdata.supplier_id = item.supplier_id
          dataArr.push(tempdata)
        }
      })
      if (dataArr.length <= 0) {
        this.$Error('请先选择商品')
        return false
      }
      addCartItem({ dataArr }).then((res) => {
        if (res.status == 1) {
          if (res.fails && res.fails.length > 0) {
            this.$Error('部分商品添加失败')
          } else {
            this.$Error('购物车添加成功')
          }
          this.$emit('refreshFn')
          setTimeout(() => {
            this.show = false
          }, 2000)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    cancel() {
      this.items = []
      this.p = 1
    },
    isShowClick() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.goodsListData()
    },
    // 滑动获取商品数据
    goodsListLoadData() {
      if (!this.locked) {
        const data = {
          p: this.p,
          subtract_price: this.full_subtract_value,
        }
        getItemList(data)
          .then((res) => {
            this.$loadingWrap.close()
            this.loading = false
            if (res.status == 1) {
              if (res.data.lists && res.data.lists.length == 10) {
                const data = res.data.lists
                this.items = this.items.concat(data)
                // console.log('items', this.items)
                this.items.forEach((it) => {
                  it.chooseNum = 0
                })
                this.p++
              } else {
                this.finished = true
              }
            } else {
              this.$Error(res.msg)
            }
          })
          .catch(() => {
            this.error = true
          })
      }
    },
    // 初次加载的数据
    goodsListData() {
      const data = {
        p: 1,
        subtract_price: this.full_subtract_value,
      }
      getItemList(data)
        .then((res) => {
          this.show = true
          this.$loadingWrap.close()
          this.loading = false
          if (res.status == 1) {
            if (res.data.lists && res.data.lists.length) {
              const data = res.data.lists
              data.forEach((it) => {
                it.chooseNum = 0
              })
              this.items = data
            } else {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
          this.locked = false
        })
        .catch(() => {
          this.error = true
        })
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
  },
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.add-on-item {
  .full-subtract-box {
    width: 100%;
    font-size: 28px;
    color: #333;
    height: 86px;
    line-height: 86px;
    text-align: center;
    background: #ffedeb;
    z-index: 1;
    span.gotoLink{
      color: #f21228;
    }
  }
  .popup-content {
    height: calc(70vh - 184px);
  }
}
.goods-con {
  padding: 0 30px;
  li {
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    padding: 20px 0;
    .img-info {
      width: 160px;
      height: 160px;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 20px;
    }
    .g-flex {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      flex: 1;
      .goods-title {
        @include lineClamp(24px, 30px, 2);
      }
      .goods-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .btn {
        width: 136px;
        line-height: 52px;
        border: 1px solid rgba(246, 18, 46, 1);
        border-radius: 26px;
        text-align: center;
        font-size: 24px;
        color: #F6122E;
      }
    }
  }
}
</style>
